<template>
    <div class="domain-register">
        <el-dialog :before-close="closeDialog"  :visible.sync="registerDialogVisible" custom-class="register-dialog" top="10vh">
            <el-form :model="register" label-width="70px" ref="register" status-icon :rules="rules" >
                <el-form-item label="用户名" prop="account">
                    <el-input type="text" v-model="register.account" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="昵称" prop="nickName">
                    <el-input type="text" v-model="register.nickName" placeholder="请输输入昵称"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="text" v-model="register.password" show-password placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="repassword">
                    <el-input type="text" v-model="register.repassword" show-password placeholder="请输入确认密码"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio v-model="register.sex" label="1">男</el-radio>
                    <el-radio v-model="register.sex" label="2">女</el-radio>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input type="text" v-model="register.email" placeholder="请输入邮箱地址"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                    <el-col :span="10">
                        <el-input type="text" v-model="register.code" show-word-limit  maxlength="4" placeholder="验证码"></el-input>
                    </el-col>
                    <el-button type="primary sendCode" :loading="sendCodeLoading" :disabled="sendCodeDisabled" @click="sendCode">{{sendCodeText}}</el-button>
                </el-form-item>
            </el-form>
            <div class="login-buttom">
                <el-button type="primary" @click="Register">立即创建</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {post} from '../../utils/httpRequest'
export default {
    data(){
        var validAccount=(rule,value,callback)=>{
            let reg=/^[0-9a-zA-Z]{4,9}$/
            if(!reg.test(value)){
                callback(new Error('账号必须是由4-9位数字和字母组合'))
            }else{
                callback()
            }
        };
        var validNickName=(rule,value,callback)=>{
            let reg=/^([\u4e00-\u9fa5]|[a-zA-Z0-9]){1,10}$/
            if(!reg.test(value)){
                callback(new Error('昵称必须是由1-10位数字和中文以及字母组合'))
            }else{
                callback()
            }
        };
        var validPssword=(rule,value,callback)=>{
            let reg=/^[0-9a-zA-Z]{6,15}$/
            if(!reg.test(value)){
                callback(new Error('密码必须是由6-15位数字和字母组合'))
            }else{
                callback()
            }
        };
        var validRepassword = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入确认密码'));
            } else if (value !== this.register.password) {
                callback(new Error('两次输入密码不一致'));
            } else {
                callback();
            }
        };
        return {
            dialogVisible:true,
            register:{
                account:"",
                nickName:"",
                password:"",
                repassword:"",
                sex:"",
                email:"",
                code:""
            },
            rules: {
                account: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { validator:validAccount,trigger:'blur'}
                ],
                nickName: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                    { validator:validNickName,trigger:'blur'}
                ],
                password:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { validator:validPssword,trigger:'blur'}
                ],
                repassword:[
                    { validator: validRepassword, trigger: 'blur' }
                ],
                sex:[
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                email:[
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
                ],
                code:[
                    { required: true, message: '请输入验证码', trigger: 'blur' }
                ]
            },
            sendCodeLoading:false,
            sendCodeText:"发送验证码",
            sendCodeDisabled:false,
            timer:null
        }
    },
    methods:{
        closeDialog(){
            this.$emit("showRegister",false)
        },
        Register(){
            this.$refs['register'].validate((valid) => {
                if (valid) {
                    post(this.http.account_tourist.register,this.register).then((response)=>{
                        if(response.success){
                            this.$notify.success({
                                title: '通知',
                                message: response.message
                            });
                            clearInterval(this.timer);
                            this.$refs["register"].resetFields();
                            this.sendCodeText="发送验证码";
                            this.sendCodeLoading=false;
                            this.sendCodeDisabled=false;
                            this.closeDialog();
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        sendCode(){
            this.$refs['register'].validateField('email',(emailValid) => {
                if(!emailValid){
                    this.sendCodeText="";
                    this.sendCodeLoading=true;
                    this.sendCodeDisabled=true;
                    post(this.http.account_tourist.sendMailValidCode,{email:this.register.email}).then((response)=>{
                        if(response.success){
                            //这里开始倒计时恢复
                            this.countDown();
                        }else{
                            //这里直接回复
                            this.sendCodeText="发送验证码";
                            this.sendCodeLoading=false;
                            this.sendCodeDisabled=false;
                        }
                    })
                }
            });
        },
        countDown(){
            const TIME_COUNT = 90;
            this.count = TIME_COUNT;
            this.timer = setInterval(() => {
                this.sendCodeLoading=false;
                if (this.count > 0 && this.count <= TIME_COUNT) {
                    this.sendCodeText=this.count;
                    this.count--;
                } else {
                    clearInterval(this.timer);
                    this.timer = null;
                    this.sendCodeText="发送验证码";
                    this.sendCodeDisabled=false;
                }
            }, 1000)
        }
    },
     props:{
        registerDialogVisible: Boolean
    }
}
</script>
<style scoped>
.sendCode{
    margin-left: 5px;
    height: 40px;
    width: 120px;
}
.el-form{
    margin-left: -5px;
}
.login-buttom{
    text-align: center;
}
</style>

<style>
.register-dialog{
    width: 420px;
}
@media screen and (max-width: 500px){
    .register-dialog{
        width: 400px;
    }
}
</style>
